import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { Row, Col, Spin, message } from 'antd';
import UseCard from './useCard';
import { QuickQueryC, XYAxisChartsC, NoDataC, SecondHeaderC } from '../../../../components';

@connect(({ profitAndLossM, loading }) => ({
  profitAndLossM,
  loading,
}))
export default class DimensStatic extends PureComponent {
  state = {
    // radioVal:undefined,
    ranking: {},
    trend: {},
    disabledValue: [],
  };

  componentDidMount() {
    const { dispatch, index, beginDate, endDate } = this.props;

    this.getD(beginDate, endDate);
  }

  // 判断日期是否大于一个月
  getD = (startdate, enddate) => {
    let type = '';
    const { dispatch, index, beginDate, endDate } = this.props;
    const startD = new Date(Date.parse(beginDate.replace(/-/g, '/')));
    const endD = new Date(Date.parse(endDate.replace(/-/g, '/')));
    const days = parseInt((endD.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24));

    const portfolioCode = this.props.portfolioCode
      ? {
          portfolioCode: this.props.portfolioCode,
        }
      : {
          portfolioCodeList: this.props.portfolioCodeList,
        };

    if (days >= 365) {
      type = 'month';
      const datas =
        index == '0'
          ? {
              ...portfolioCode,
              timeRange: index,
              IntervalDimension: 'month',
              beginDate,
              endDate,
            }
          : {
              ...portfolioCode,
              timeRange: index,
              IntervalDimension: 'month',
              beginDate,
              endDate,
            };
      this.setState(
        {
          radioVal: 'month',
          disabledValue: [],
        },
        () => {
          if (this.state.radioVal) {
            dispatch({
              type: 'profitAndLossM/getEchartDate1',
              payload: datas,
              callback: (res) => {
                const { data } = res;
                if (res.code == 0) {
                  this.setState({
                    ranking: data.ranking,
                    trend: data.trend,
                  });
                } else {
                  message.error(res.msg);
                  this.setState({
                    ranking: {},
                    trend: {},
                  });
                }
              },
            });
          }
        },
      );
    } else if (days > 30 && days < 365) {
      type = 'month';
      const datas =
        index == '0'
          ? {
              ...portfolioCode,
              timeRange: index,
              IntervalDimension: 'month',
              beginDate,
              endDate,
            }
          : {
              ...portfolioCode,
              timeRange: index,
              IntervalDimension: 'month',
              beginDate,
              endDate,
            };
      this.setState(
        {
          radioVal: 'month',
          disabledValue: ['year'],
        },
        () => {
          if (this.state.radioVal) {
            dispatch({
              type: 'profitAndLossM/getEchartDate1',
              payload: datas,
              callback: (res) => {
                const { data } = res;
                if (res.code == 0) {
                  this.setState({
                    ranking: data.ranking,
                    trend: data.trend,
                  });
                } else {
                  message.error(res.msg);
                  this.setState({
                    ranking: {},
                    trend: {},
                  });
                }
              },
            });
          }
        },
      );
    } else if (days <= 30) {
      type = 'day';
      const datas =
        index == '0'
          ? {
              ...portfolioCode,
              timeRange: index,
              IntervalDimension: 'day',
              beginDate,
              endDate,
            }
          : {
              ...portfolioCode,
              timeRange: index,
              IntervalDimension: 'day',
              beginDate,
              endDate,
            };
      this.setState(
        {
          radioVal: 'day',
          disabledValue: ['month', 'year'],
        },
        () => {
          if (this.state.radioVal) {
            dispatch({
              type: 'profitAndLossM/getEchartDate1',
              payload: datas,
              callback: (res) => {
                const { data } = res;
                if (res.code == 0) {
                  this.setState({
                    ranking: data.ranking,
                    trend: data.trend,
                  });
                } else {
                  message.error(res.msg);
                  this.setState({
                    ranking: {},
                    trend: {},
                  });
                }
              },
            });
          }
        },
      );
    }
  };

  componentDidUpdate(prevProps, prevState) {
    const { dispatch, index, beginDate, endDate, num } = this.props;

    if (prevProps.num !== num) {
      if (index == '0' && beginDate == undefined && endDate == undefined) {
      } else {
        const portfolioCode = this.props.portfolioCode
          ? {
              portfolioCode: this.props.portfolioCode,
            }
          : {
              portfolioCodeList: this.props.portfolioCodeList,
            };

        this.setState({
          ranking: {},
          trend: {},
        });
        const datas = {
          ...portfolioCode,
          timeRange: index,
          beginDate,
          endDate,
        };
        const startD = new Date(Date.parse(beginDate.replace(/-/g, '/')));
        const endD = new Date(Date.parse(endDate.replace(/-/g, '/')));
        const days = parseInt((endD.getTime() - startD.getTime()) / (1000 * 60 * 60 * 24));
        const type = '';
        if (days >= 365) {
          datas.IntervalDimension = 'month';
          this.setState(
            {
              radioVal: 'month',
              disabledValue: [],
            },
            () => {
              if (prevState.radioVal) {
                dispatch({
                  type: 'profitAndLossM/getEchartDate1',
                  payload: datas,
                  callback: (res) => {
                    const { data } = res;
                    if (res.code == 0) {
                      this.setState({
                        ranking: data.ranking,
                        trend: data.trend,
                      });
                    } else {
                      message.error(res.msg);
                      this.setState({
                        ranking: {},
                        trend: {},
                      });
                    }
                  },
                });
              }
            },
          );
        } else if (days > 30 && days < 365) {
          datas.IntervalDimension = 'month';
          prevState.radioVal = 'month';
          this.setState(
            {
              radioVal: 'month',
              disabledValue: ['year'],
            },
            () => {
              if (this.state.radioVal) {
                dispatch({
                  type: 'profitAndLossM/getEchartDate1',
                  payload: datas,
                  callback: (res) => {
                    const { data } = res;
                    if (res.code == 0) {
                      this.setState({
                        ranking: data.ranking,
                        trend: data.trend,
                      });
                    } else {
                      message.error(res.msg);
                      this.setState({
                        ranking: {},
                        trend: {},
                      });
                    }
                  },
                });
              }
            },
          );
        } else if (days <= 30) {
          datas.IntervalDimension = 'day';
          this.setState(
            {
              radioVal: 'day',
              disabledValue: ['month', 'year'],
            },
            () => {
              if (prevState.radioVal) {
                dispatch({
                  type: 'profitAndLossM/getEchartDate1',
                  payload: datas,
                  callback: (res) => {
                    const { data } = res;
                    if (res.code == 0) {
                      this.setState({
                        ranking: data.ranking,
                        trend: data.trend,
                      });
                    } else {
                      message.error(res.msg);
                      this.setState({
                        ranking: {},
                        trend: {},
                      });
                    }
                  },
                });
              }
            },
          );
        }
      }
    }
  }

  getData = (series) => {
    let arr = [];
    if (series) {
      series.map((item) => {
        arr = item.data;
      });
      return arr;
    }
  };

  showEcharts = () => {
    const { trend } = this.state;
    const xAxis = trend.xAxis || [];
    const series = trend.series || [];
    const data = this.getData(series);
    return (
      <div>
        <XYAxisChartsC series={series} xAxis={xAxis} height={378} dataZoom={true} gridLeft={90} gridRight={20} yAxisUnit={['单位(万元)']} debtAndProfit={true} type='bar' />
      </div>
    );
  };

  // 按钮点击事件
  onChangeRadio = (e) => {
    const { dispatch, index, beginDate, endDate } = this.props;
    const portfolioCode = this.props.portfolioCode
      ? {
          portfolioCode: this.props.portfolioCode,
        }
      : {
          portfolioCodeList: this.props.portfolioCodeList,
        };

    if (e !== undefined) {
      this.setState({
        radioVal: e,
      });
      if (index == '0') {
        dispatch({
          type: 'profitAndLossM/getEchartDate1',
          payload: {
            ...portfolioCode,
            timeRange: index,
            IntervalDimension: e,
            beginDate,
            endDate,
          },
          callback: (res) => {
            const { data } = res;
            if (res.code == 0) {
              this.setState({
                ranking: data.ranking,
                trend: data.trend,
              });
            } else {
              message.error(res.msg);
              this.setState({
                ranking: {},
                trend: {},
              });
            }
          },
        });
      } else {
        dispatch({
          type: 'profitAndLossM/getEchartDate1',
          payload: {
            ...portfolioCode,
            timeRange: index,
            IntervalDimension: e,
            beginDate,
            endDate,
          },
          callback: (res) => {
            const { data } = res;
            if (res.code == 0) {
              this.setState({
                ranking: data.ranking,
                trend: data.trend,
              });
            } else {
              message.error(res.msg);
              this.setState({
                ranking: {},
                trend: {},
              });
            }
          },
        });
      }
    }
  };

  render() {
    const { radioVal, ranking, disabledValue } = this.state;
    const { loading, changeDMY } = this.props;
    const { top } = ranking;
    const props = {
      ranking: ranking || {},
      index: 1,
    };
    return (
      <div>
        <div className='bondDeviation'>
          <SecondHeaderC title='区间维度统计' />
          <div>
            {' '}
            <Spin spinning={loading.effects['profitAndLossM/getEchartDate1'] == true}>
              <Row>
                <Col span={24} className='btnGroup' style={{ textAlign: 'right' }}>
                  <div>
                    <QuickQueryC
                      dataSource={[
                        { value: 'day', title: '日' },
                        { value: 'month', title: '月' },
                        { value: 'year', title: '年' },
                      ]}
                      initialValue={changeDMY || radioVal}
                      disabled={disabledValue}
                      onChange={(e) => this.onChangeRadio(e)}
                    />
                  </div>
                </Col>
              </Row>
              <Row>
                <Col span={12}>
                  <div className='cardBodyEcharts mgff' style={{ height: '378px' }}>
                    {this.showEcharts()}
                  </div>
                </Col>
                <Col span={12}>
                  {top && top.length ? (
                    <div className='cardBodyEcharts' style={{ height: '378px' }}>
                      {' '}
                      <UseCard {...props} />{' '}
                    </div>
                  ) : (
                    <NoDataC height='378px' />
                  )}
                </Col>
              </Row>
            </Spin>
          </div>
        </div>
      </div>
    );
  }
}
